<template>
    <div>
        <v-progress-linear v-if="loading" indeterminate ></v-progress-linear>
        <v-app-bar app elevation="0" dense color="white">
            <v-btn icon @click="$router.go(-1)">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>
            <v-toolbar-title class="text-center flex-grow-1 subtitle-1">{{appTitle}}</v-toolbar-title>
        </v-app-bar>



        <v-container>
            <div>
                <v-row>
                    <v-col cols="6">
                        <h3 class="my-2 pl-2 border-left-red">咨询服务专员</h3>
                    </v-col>
                    <v-col cols="6" class="text-right" style="font-size: 12px;color: #6f7071;margin-top: 8px">查看全部</v-col>
                </v-row>
                <v-card outlined class="rounded-lg" st>
                    <v-card-text>
                        <v-row align="center">
                            <v-col cols="auto">
                                <v-avatar size="100" >
                                    <img style="max-width: 100%; height: auto; display: block;" src="/asset/loan/img/yuangong1 (1).jpg" alt="员工图片">
                                </v-avatar>
                            </v-col>
                            <v-col>
                                <v-row>
                                    <v-col cols="12">
                                        <div>成都贷款咨询专家-陈经理</div>
                                        <v-btn
                                            style="margin-top: 10px;margin-right: 10px"
                                            depressed
                                            dark
                                            small
                                            class="rounded-pill"
                                            color="primary"
                                        >
                                            电话咨询
                                        </v-btn>
                                        <v-btn
                                            style="margin-top: 10px"
                                            depressed
                                            dark
                                            color="secondary"
                                            small
                                            class="rounded-pill"
                                            :to="`/login`"
                                        >
                                            在线咨询
                                        </v-btn>
                                    </v-col>
                                </v-row>
                            </v-col>
                        </v-row>
                    </v-card-text>
                </v-card>
                <v-card outlined class="rounded-lg" st>
                    <v-card-text>
                        <v-row align="center">
                            <v-col cols="auto">
                                <v-avatar size="100" >
                                    <img style="max-width: 100%; height: auto; display: block;" src="/asset/loan/img/c5a12cb0c13abf6a.jpg" alt="员工图片">
                                </v-avatar>
                            </v-col>
                            <v-col>
                                <v-row>
                                    <v-col cols="12">
                                        <div>成都咨询服务专员-孙经理</div>
                                        <v-btn
                                            style="margin-top: 10px;margin-right: 10px"
                                            depressed
                                            dark
                                            small
                                            class="rounded-pill"
                                            color="primary"
                                        >
                                            电话咨询
                                        </v-btn>
                                        <v-btn
                                            style="margin-top: 10px"
                                            depressed
                                            dark
                                            color="secondary"
                                            small
                                            class="rounded-pill"
                                            :to="`/login`"
                                        >
                                            在线咨询
                                        </v-btn>
                                    </v-col>
                                </v-row>
                            </v-col>
                        </v-row>
                    </v-card-text>
                </v-card>
            </div>

        </v-container>



<!--        <v-container>-->
<!--            <v-card elevation="0" class="mb-2 pa-4 text&#45;&#45;primary" v-for="item of items" :key="item.id" :to="uid > 0 ? `/loan/${item.id}` : `/login`">-->
<!--                <v-row dense class="align-center" no-gutters>-->
<!--                    <v-col cols="12">-->
<!--                        <span class="font-weight-bold subtitle-1">{{item.name}}</span>-->
<!--                        <span class="ml-2 primary&#45;&#45;text text-caption">{{item.category_type}}</span>-->
<!--                    </v-col>-->
<!--                     <v-col cols="12" >-->
<!--                        <span>{{item.apply_at ? item.apply_at.substring(0, 10).replaceAll("-", "/") : ''}}</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="12">-->
<!--                        <span class="text&#45;&#45;secondary">贷款金额: </span>-->
<!--                        <span class="primary&#45;&#45;text font-weight-bold subtitle-2" v-if="item.amount_start == item.amount_end">{{item.amount_start_zh}}</span>-->
<!--                        <span class="primary&#45;&#45;text font-weight-bold subtitle-2" v-else>{{item.amount_start_zh}}-{{item.amount_end_zh}}</span>-->
<!--                        元-->
<!--                    </v-col>-->
<!--                    <v-col cols="12">-->
<!--                        <span class="text&#45;&#45;secondary">抢单需要: </span>-->
<!--                        <span class="primary&#45;&#45;text font-weight-bold subtitle-2">{{item.need_ticket}}</span>-->
<!--                        金币-->
<!--                    </v-col>-->
<!--                    <v-col cols="6" class="d-flex align-center">-->
<!--                        <v-icon small>mdi-map-marker</v-icon> {{item.province}} {{item.city}}-->
<!--                    </v-col>-->
<!--                    <v-col cols="6" class="text-right">-->
<!--                        <v-btn depressed small rounded color="primary">一键抢单</v-btn>-->
<!--                    </v-col>-->
<!--                </v-row>-->
<!--            </v-card>-->

<!--         -->
<!--        </v-container>-->
    </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from 'vuex';
import { areaList } from '@vant/area-data';
import { encode, decode } from 'js-base64';

export default {
    data: () => ({
        loading: false,
        items: [],
        pageNo: 1,
        pageSize: 10,
        finished: false,
        cate: '',
        amount_range: '',
        filterSheet: false,
        provinceList: areaList.province_list,
        provinceDialog: false,
        provinceSelected: '',
        cityDialog: false,
        citySelected: ''
    }),
    computed: {
        provinceSelectedName() {
            if (this.provinceSelected == '') return '';

            return this.provinceList[this.provinceSelected] ? this.provinceList[this.provinceSelected] : ''
        },
        citySelectedName() {
            if (this.citySelected == '') return '';

            return areaList.city_list[this.citySelected] ? areaList.city_list[this.citySelected] : ''
        },
        cityList() {
            if(this.provinceSelected.length == 0) return [];

            const list = Object.keys(areaList.city_list).map((code) => ({
                code,
                name: areaList.city_list[code],
            }));

            const code = this.provinceSelected.slice(0, 2);
            return list.filter(
                (item) => item.code.indexOf(code) === 0
            );
        },
        appTitle() {
            if (this.cate == 'general') return '银行综合贷款';
            if (this.cate == 'credit-provident') return '公积金信用贷';
            if (this.cate == 'mortgage-car') return '车辆抵押贷';
            if (this.cate == 'mortgage-house') return '房屋抵押贷';
            if (this.cate == 'mortgage-tax') return '企业税贷';

            return "贷款申请";
        },
        ...mapGetters([
            'uid'
        ]),
    },
    created() {
        this.cate = this.$route.query.cate;
        this.load();
    },
    beforeRouteUpdate(to, from, next) {
        next();
        this.reset();
        this.cate = to.query.cate;
        this.amount_range = '';
        this.load();
    },
    methods: {
        filterData(){
            const that = this;
            that.loading = true;
            axios.get(`/v1/loan_application/checkStatus` ).then((response) => {
                if (response.data.code == 200) {
                    this.filterSheet = true
                } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                }
            })
                .catch(function () {})
                .then(function () {
                    that.loading = false;
                });
        },
        reset() {
            this.items = [];
            this.pageNo = 1;
            this.finished = false;
        },
        clearAera() {
            this.provinceSelected = '';
            this.citySelected = '';
        },
        filter() {
            this.reset();
            const params = Object.entries({
                pageSize: this.pageSize,
                page: this.pageNo,
                province: encode(this.provinceSelectedName),
                city: encode(this.citySelectedName),
                amount_range: this.amount_range
            }).reduce((a,[k,v]) => (v ? (a[k]=v, a) : a), {});
            localStorage.setItem('savedFilters', JSON.stringify(params));
            this.load();
            this.filterSheet = false;
        },
        load() {
            let params = null;
            const savedFilters = localStorage.getItem('savedFilters');
            if (savedFilters) {
                params = JSON.parse(savedFilters);
            }else {
                params = Object.entries({
                    pageSize: this.pageSize,
                    page: this.pageNo,
                    province: encode(this.provinceSelectedName),
                    city: encode(this.citySelectedName),
                    amount_range: this.amount_range
                }).reduce((a,[k,v]) => (v ? (a[k]=v, a) : a), {});
            }
            if(this.cate){
                params.category = this.cate
            }
            const that = this;
            that.loading = true;
            axios.get(`/v1/loan`,{ params: params} ).then((response) => {
                if (response.data.code == 0) {
                    that.items = that.items.concat(response.data.data.items);
                    if (response.data.data.items.length < that.pageSize) {
                        that.finished = true;
                    }
                } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                }
            })
            .catch(function () {})
            .then(function () {
                 that.loading = false;
            });
        },
        loadMore() {
            this.pageNo++;
            this.load();
        },
    }
};
</script>

<style lang="scss">
.filter-active {
    background-color: #F5DEE1;
}

.province-city {
    top:0;
    left:0;
    right:0;
    z-index: 1;

    .v-toolbar__content {
        z-index: 1;
    }
}


</style>

